<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* width 内容宽度  px % rem */
        /* 块级元素 div p li  */
        /* 当块级元素没有设置width 会自动撑满宽度 */
        /* height 内容高度 pc % rem*/
        /* 不管块级元素还是行内元素的height不设置则默认未内容高度，没内容则为0 */
        /* 如果height设置小了，可能内容会溢出 */
        /* 为了防止有溢出，有内容的盒子一般不设置height，让他自动被内容撑开 */
        .box1{
            height: 100px;
            background-color: red;
        }
        a{
            height: 100px;
            background-color:yellow;
        }
        .box2{
            width: 200px;
            background-color:rgb(235, 200, 200);
            height:30px;
        }
    </style>
</head>
<body>
    <div class="box1">div 当块级元素没有设置width 会自动撑满宽度</div>
    <a href="">a  非块级元素没有设置width 不能自动撑满宽度</a>
    <div class="box2">height太小，文字太多溢出了</div>
</body>
</html>